<style lang="stylus" scoped>

</style>

<template>
  <div class="row justify-between q-col-gutter-sm">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <q-card class="shadow-2">
        <q-card-section class="q-pa-sm">
          <div class="row items-center no-wrap">
            <div class="col">
              <q-chip square class="no-border-radius q-ml-none q-mr-none text-weight-bold">
                <q-avatar class="no-border-radius" icon="business" color="light-blue" text-color="white"></q-avatar>
                {{ baseInfoForm.code }}
              </q-chip>
            </div>
            <div class="col-auto">
              <q-btn color="grey-7" round flat icon="more_vert">
                <q-menu cover auto-close>
                  <q-list>
                    <q-item clickable @click="$router.go(-1)">
                      <q-item-section>返回</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-section class="q-pa-sm">
          <main-field :form="baseInfoForm" :field="fieldConfig"></main-field>
        </q-card-section>
      </q-card>
    </div>
    <div class="col-12">
      <q-card class="shadow-2">
        <q-card-section class="q-pa-none">
          <q-tabs
            v-model="tabSelected"
            dense
            class="bg-light-blue text-white"
            align="left"
            narrow-indicator
            @input="tabSelect"
          >
            <q-tab name="tab1" label="部门" />
            <q-tab name="tab2" label="地点" />
            <q-tab name="tab3" label="用户" />
          </q-tabs>

          <q-tab-panels v-model="tabSelected" animated>
            <q-tab-panel class="q-pa-none" name="tab1">
              <q-table
                flat dense
                class="bg-white"
                :data="depTableConfig.data"
                :columns="depTableConfig.columns"
                row-key="id"
                separator="cell"
                :filter="depTableConfig.filter"
                :pagination.sync="depTableConfig.pagination"
                :rows-per-page-options="[3, 5, 10, 20]"
                no-data-label="暂无数据"
                table-class="h-custom"
                @request="depListGet"
              >
                <template v-slot:top-right>
                  <q-input borderless dense debounce="300" v-model="depTableConfig.filter" placeholder="Search">
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td key="code" :props="props">
                      <span class="text-light-blue cursor-pointer">{{ props.row.code  }}</span>
                    </q-td>
                    <q-td key="name" :props="props">{{ props.row.name }}</q-td>
                    <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                  </q-tr>
                  <q-tr v-show="props.expand" :props="props">
                    <q-td colspan="100%">
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:pagination="props">
                  <q-pagination
                    v-model="depTableConfig.pagination.page"
                    color="blue"
                    :max-pages="5"
                    :max="depTablePages"
                    :boundaryLinks="true"
                    :directionLinks="true"
                  />
                  共 {{ depTableConfig.total }} 条
                </template>
              </q-table>
            </q-tab-panel>

            <q-tab-panel class="q-pa-none" name="tab2">
              <q-table
                flat dense
                class="bg-white"
                :data="siteTableConfig.data"
                :columns="siteTableConfig.columns"
                row-key="id"
                separator="cell"
                :filter="siteTableConfig.filter"
                :pagination.sync="siteTableConfig.pagination"
                :rows-per-page-options="[3, 5, 10, 20]"
                no-data-label="暂无数据"
                table-class="h-custom"
                @request="siteListGet"
              >
                <template v-slot:top-right>
                  <q-input borderless dense debounce="300" v-model="siteTableConfig.filter" placeholder="Search">
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td key="siteCode" :props="props">
                      <span class="text-light-blue cursor-pointer">{{ props.row.siteCode  }}</span>
                    </q-td>
                    <q-td key="siteName" :props="props">{{ props.row.siteName }}</q-td>
                    <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                  </q-tr>
                  <q-tr v-show="props.expand" :props="props">
                    <q-td colspan="100%">
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:pagination="props">
                  <q-pagination
                    v-model="siteTableConfig.pagination.page"
                    color="blue"
                    :max-pages="5"
                    :max="siteTablePages"
                    :boundaryLinks="true"
                    :directionLinks="true"
                  />
                  共 {{ siteTableConfig.total }} 条
                </template>
              </q-table>
            </q-tab-panel>

            <q-tab-panel class="q-pa-none" name="tab3">
              <q-table
                flat dense
                class="bg-white"
                :data="userTableConfig.data"
                :columns="userTableConfig.columns"
                row-key="id"
                separator="cell"
                :filter="userTableConfig.filter"
                :pagination.sync="userTableConfig.pagination"
                :rows-per-page-options="[3, 5, 10, 20]"
                no-data-label="暂无数据"
                table-class="h-custom"
                @request="siteListGet"
              >
                <template v-slot:top-right>
                  <q-input borderless dense debounce="300" v-model="userTableConfig.filter" placeholder="Search">
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                </template>
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td key="loginName" :props="props">
                      <span class="text-light-blue cursor-pointer">{{ props.row.loginName  }}</span>
                    </q-td>
                    <q-td key="email" :props="props">{{ props.row.email }}</q-td>
                    <q-td key="createTime" :props="props">{{ props.row.createTime }}</q-td>
                  </q-tr>
                  <q-tr v-show="props.expand" :props="props">
                    <q-td colspan="100%">
                    </q-td>
                  </q-tr>
                </template>
                <template v-slot:pagination="props">
                  <q-pagination
                    v-model="userTableConfig.pagination.page"
                    color="blue"
                    :max-pages="5"
                    :max="userTablePages"
                    :boundaryLinks="true"
                    :directionLinks="true"
                  />
                  共 {{ userTableConfig.total }} 条
                </template>
              </q-table>
            </q-tab-panel>
          </q-tab-panels>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script>
import MainField from 'src/pages/Common/SecondPackage/MainField/MainField'
export default {
  name: 'CompanyDetails',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  components: {
    MainField
  },
  data () {
    return {
      baseInfoForm: {
        name: '示例-公司名称',
        code: 'MDMDEMO1000',
        address: '中国 - 江苏 - 苏州',
        createUserName: 'Admin',
        createTime: '2019-07-09',
        lastUpdateTime: '2019-07-09',
        remark: `您好，
          这是一段有格式的文字:SAP 是全球企业管理软件与解决方案的技术领袖，同时也是市场领导者。
          30余年，通过其应用软件、服务与支持，SAP持续不断向全球各行业企业提供全面的企业级管理软件解决方案。`
      },
      fieldConfig: [
        {
          name: 'name',
          label: '公司名称'
        },
        {
          name: 'code',
          label: '公司编码'
        },
        {
          name: 'address',
          label: '公司地址'
        },
        {
          name: 'createUserName',
          label: '创建人'
        },
        {
          name: 'createTime',
          label: '创建时间'
        },
        {
          name: 'remark',
          label: '说明',
          type: 'textarea'
        }
      ],
      tabSelected: 'tab1',
      depTableConfig: {
        // 当加入 required: true 属性时  visibleColumns 对当前字段无效
        columns: [
          { name: 'code', required: true, label: '部门编码', align: 'left', field: 'code', sortable: true },
          { name: 'name', required: true, label: '部门名称', align: 'left', field: 'name', sortable: true },
          { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
        ],
        data: [],
        filter: '',
        total: 0,
        pagination: {
          page: 1,
          rowsPerPage: 5,
          rowsNumber: 5,
          sortBy: '',
          descending: Boolean
        }
      },
      siteTableConfig: {
        // 当加入 required: true 属性时  visibleColumns 对当前字段无效
        columns: [
          { name: 'siteCode', required: true, label: '地点编码', align: 'left', field: 'siteCode', sortable: true },
          { name: 'siteName', required: true, label: '地点名称', align: 'left', field: 'siteName', sortable: true },
          { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
        ],
        data: [],
        filter: '',
        total: 0,
        pagination: {
          page: 1,
          rowsPerPage: 5,
          rowsNumber: 5,
          sortBy: '',
          descending: Boolean
        }
      },
      userTableConfig: {
        // 当加入 required: true 属性时  visibleColumns 对当前字段无效
        columns: [
          { name: 'loginName', required: true, label: '账户', align: 'left', field: 'loginName', sortable: true },
          { name: 'email', required: true, label: '邮箱地址', align: 'left', field: 'email', sortable: true },
          { name: 'createTime', field: 'createTime', align: 'left', label: '创建时间', sortable: true }
        ],
        data: [],
        filter: '',
        total: 0,
        pagination: {
          page: 1,
          rowsPerPage: 5,
          rowsNumber: 5,
          sortBy: '',
          descending: Boolean
        }
      }
    }
  },
  computed: {
    depTablePages () {
      return Math.ceil(this.depTableConfig.total / this.depTableConfig.pagination.rowsPerPage)
    },
    siteTablePages () {
      return Math.ceil(this.siteTableConfig.total / this.siteTableConfig.pagination.rowsPerPage)
    },
    userTablePages () {
      return Math.ceil(this.userTableConfig.total / this.userTableConfig.pagination.rowsPerPage)
    }
  },
  watch: {
    'depTableConfig.pagination.page' () {
      this.depListGet({
        pagination: this.depTableConfig.pagination,
        filter: this.depTableConfig.filter
      })
    },
    'siteTableConfig.pagination.page' () {
      this.siteListGet({
        pagination: this.siteTableConfig.pagination,
        filter: this.siteTableConfig.filter
      })
    },
    'userTableConfig.pagination.page' () {
      this.userListGet({
        pagination: this.userTableConfig.pagination,
        filter: this.userTableConfig.filter
      })
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.depListGet({
        pagination: this.depTableConfig.pagination,
        filter: this.depTableConfig.filter
      })
    //   this.baseInfoGet()
    },
    baseInfoGet () {
      this.$api({
        method: 'get',
        url: `/mdm/org/findById/${this.id}`,
        successCallback: ({ data }) => {
          this.baseInfoForm = { ...data }
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    tabSelect () {
      switch (this.tabSelected) {
        case 'tab1':
          this.depListGet({
            pagination: this.depTableConfig.pagination,
            filter: this.depTableConfig.filter
          })
          break
        case 'tab2':
          this.siteListGet({
            pagination: this.siteTableConfig.pagination,
            filter: this.siteTableConfig.filter
          })
          break
        case 'tab3':
          this.userListGet({
            pagination: this.userTableConfig.pagination,
            filter: this.userTableConfig.filter
          })
          break
      }
    },
    async depListGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        method: 'post',
        url: '/mdm/org/query',
        params: {
          type: 1,
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          name: filter
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.depTableConfig.total = data.total
          this.depTableConfig.data = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.depTableConfig.pagination.page = page
      this.depTableConfig.pagination.rowsPerPage = rowsPerPage
      this.depTableConfig.pagination.sortBy = sortBy
      this.depTableConfig.pagination.descending = descending
      this.depTableConfig.filter = filter
    },
    async siteListGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        method: 'post',
        url: '/mdm/companysite/query',
        params: {
          companyId: this.id,
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          siteName: filter
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.siteTableConfig.total = data.total
          this.siteTableConfig.data = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.siteTableConfig.pagination.page = page
      this.siteTableConfig.pagination.rowsPerPage = rowsPerPage
      this.siteTableConfig.pagination.sortBy = sortBy
      this.siteTableConfig.pagination.descending = descending
      this.siteTableConfig.filter = filter
    },
    async userListGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        method: 'post',
        url: '/mdm/org/queryUser',
        params: {
          id: this.id,
          type: 1,
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          name: filter
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.userTableConfig.total = data.total
          this.userTableConfig.data = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.userTableConfig.pagination.page = page
      this.userTableConfig.pagination.rowsPerPage = rowsPerPage
      this.userTableConfig.pagination.sortBy = sortBy
      this.userTableConfig.pagination.descending = descending
      this.userTableConfig.filter = filter
    }
  }
}
</script>
